{% extends 'cms/base.html' %}

{% block title %}数据可视化{% endblock %}

{% block head %}
  <script src="{{ url_for('static',filename='cms/js/boards.js') }}"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
{% endblock %}

{% block page_title %}
  {{ self.title() }}
{% endblock %}

{% block main_content %}
  <div class="top-box">

  </div>
    <div id="main-1" style="width: 900px;height:500px;"></div>
      <script type="text/javascript">
          // 假设后端传递过来的 boards 数据已经转换为 JavaScript 数组
          var boards = [
              {% for board in boards %}
              {
                  "name": "{{ board.name }}",
                  "posts": "{{ board.posts|length }}",
                  //"create_time": "{{ board.create_time }}"
              },
              {% endfor %}
          ];

          // 提取板块名称和帖子数量数据
          var boardNames = [];
          var postCounts = [];
          for (var i = 0; i < boards.length; i++) {
              boardNames.push(boards[i].name);
              postCounts.push(parseInt(boards[i].posts));
          }

          var myChart = echarts.init(document.getElementById('main-1'));

          var option = {
              title: {
                  text: '动物物种分类数量统计-门'
              },
              tooltip: {},
              xAxis: {
                  data: boardNames
              },
              yAxis: {},
              series: [{
                  name: '帖子数量',
                  type: 'bar',
                  data: postCounts
              }]
          };

          myChart.setOption(option);
      </script>

<div id="main-2" style="width: 900px;height:500px;"></div>
      <script type="text/javascript">
          // 假设后端传递过来的 boards 数据已经转换为 JavaScript 数组
          var boards = [
              {% for board in plant_boards %}
              {
                  "name": "{{ board.name }}",
                  "posts": "{{ board.posts|length }}",
                  //"create_time": "{{ board.create_time }}"
              },
              {% endfor %}
          ];

          // 提取板块名称和帖子数量数据
          var boardNames = [];
          var postCounts = [];
          for (var i = 0; i < boards.length; i++) {
              boardNames.push(boards[i].name);
              postCounts.push(parseInt(boards[i].posts));
          }

          var myChart = echarts.init(document.getElementById('main-2'));

          var option = {
              title: {
                  text: '植物物种分类数量统计-门'
              },
              tooltip: {},
              xAxis: {
                  data: boardNames
              },
              yAxis: {},
              series: [{
                  name: '帖子数量',
                  type: 'bar',
                  data: postCounts
              }]
          };

          myChart.setOption(option);
      </script>
{% endblock %}